<template>
    <el-card>
      
      <!-- 查询表单 -->
      <div class="search-form">
        <el-form :inline="true" :model="queryParams" class="demo-form-inline">
          <el-form-item label="User ID">
            <el-input v-model="queryParams.userId" placeholder="请输入User ID" clearable/>
          </el-form-item>
          <el-form-item label="Dealer Name">
            <el-input v-model="queryParams.dealerName" placeholder="请输入Dealer Name" clearable/>
          </el-form-item>
          <el-form-item label="Email">
            <el-input v-model="queryParams.email" placeholder="请输入Email" clearable/>
          </el-form-item>
          <el-form-item label="Phone">
            <el-input v-model="queryParams.phone" placeholder="请输入Phone" clearable/>
          </el-form-item>
          <el-form-item label="Status">
            <el-select v-model="queryParams.status" placeholder="请选择Status" clearable>
              <el-option label="Normal" value="Normal" />
              <el-option label="Locked" value="Locked" />
              <el-option label="Retired" value="Retired" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleQuery">Query</el-button>
            <el-button @click="handleReset">Reset</el-button>
          </el-form-item>
        </el-form>
      </div>
        <div class="card-header">
          <el-button type="primary" @click="handleCreate">Create Dealer</el-button>
        </div>
      <el-table v-loading="loading" border :data="dealerList">

        <el-table-column prop="userId" label="User ID" align="center" :show-overflow-tooltip="true" width="160">
          <template #default="scope">
            <div v-if="scope.row.userId">
              {{ scope.row.userId }}
              <el-button size="small" type="text" icon="DocumentCopy" circle></el-button>
            </div>
            <span v-else>-</span>
          </template>
        </el-table-column>
        <el-table-column prop="dealerName" label="Dealer Name" align="center" :show-overflow-tooltip="true" width="160">
          <template #default="scope">
            <div v-if="scope.row.dealerName">
              {{ scope.row.dealerName }}
              <el-button size="small" type="text" icon="DocumentCopy" circle></el-button>
            </div>
            <span v-else>-</span>
          </template>
        </el-table-column>
        <el-table-column prop="userLevel" label="User Level" align="center" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="email" label="Email" align="center" :show-overflow-tooltip="true">
          <template #default="scope">
            <span v-if="scope.row.email">{{ scope.row.email }}</span>
            <span v-else>-</span>
          </template>
        </el-table-column>
        <el-table-column prop="phone" label="Phone" align="center">
          <template #default="scope">
            <div v-if="scope.row.phone">
              {{ scope.row.phone }}
              <el-button size="small" type="text" icon="VideoFilled" circle></el-button>
            </div>
            <span v-else>-</span>
          </template>
        </el-table-column>
        <el-table-column prop="kycStatus" label="KYC Status" align="center">
          <template #default="scope">
            <el-tag v-if="scope.row.kycStatus === 'Pending'" type="warning">Pending</el-tag>
            <el-tag v-else-if="scope.row.kycStatus === 'Approved'" type="success">Approved</el-tag>
            <el-tag v-else-if="scope.row.kycStatus === 'Rejected'" type="danger">Rejected</el-tag>
            <span v-else>{{ scope.row.kycStatus }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="Status" align="center">
          <template #default="scope">
            <el-tag type="success">{{ scope.row.status }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="businessPermission" label="Business Permission" align="center">
          <template #default="scope">
            <el-tag type="success">{{ scope.row.businessPermission }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="country" label="Country" align="center" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="creator" label="Creator" align="center" :show-overflow-tooltip="true">
          <template #default="scope">
            <el-popover
              trigger="hover"
              placement="top"
              :width="200"
              v-if="scope.row.creator.includes('@')"
            >
              <div>{{ scope.row.creator }}</div>
              <template #reference>
                <span>{{ scope.row.creator.split('@')[0] }}</span>
              </template>
            </el-popover>
            <span v-else>{{ scope.row.creator }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="Create Time" align="center" width="160">
          <template #default="scope">
            <span>{{ scope.row.createTime }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="updateTime" label="Update Time" align="center" width="160">
          <template #default="scope">
            <span>{{ scope.row.updateTime }}</span>
          </template>
        </el-table-column>
        <el-table-column label="Operations" align="center" width="120" fixed="right">
          <template #default="scope">
            <el-button type="link" @click="handleDetail(scope.row)">Detail</el-button>
          </template>
        </el-table-column>
      </el-table>
      
      <pagination
        v-show="total > 0"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        :total="total"
        @pagination="getList"
      />
    </el-card>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import { ElMessage } from 'element-plus';
import { useRouter } from 'vue-router';

// 定义Dealer数据类型
interface Dealer {
  id?: string | number;
  userId?: string;
  dealerName?: string;
  userLevel?: string;
  email?: string;
  phone?: string;
  kycStatus?: string;
  status?: string;
  businessPermission?: string;
  country?: string;
  creator?: string;
  createTime?: string;
  updateTime?: string;
}

// 定义查询参数类型
interface QueryParams {
  pageNum: number;
  pageSize: number;
  userId?: string;
  dealerName?: string;
  email?: string;
  phone?: string;
  status?: string;
}

const router = useRouter();
const loading = ref(false);
const total = ref(0);
const dealerList = ref<Dealer[]>([]);

const queryParams = reactive<QueryParams>({
  pageNum: 1,
  pageSize: 10
});

// 模拟数据
const mockData: Dealer[] = [
  {
    userId: '197776283646251008',
    dealerName: 'OMOWUNMI SEKINAT ADAMS',
    userLevel: '',
    email: 'adamsemekini@gmail.com',
    phone: '0234071896869',
    kycStatus: 'Pending',
    status: 'Normal',
    businessPermission: 'Normal',
    country: 'NG',
    creator: 'Ojo Babatunde',
    createTime: '2025-10-13 16:45:43',
    updateTime: '2025-10-13 17:49:31'
  },
  {
    userId: '197776053484978586',
    dealerName: 'NURA ADAMU SUNUSI',
    userLevel: 'Newcomer',
    email: '',
    phone: '02340706251656',
    kycStatus: 'Approved',
    status: 'Normal',
    businessPermission: 'Normal',
    country: 'NG',
    creator: 'Adagbonyin Noah',
    createTime: '2025-10-13 16:37:11',
    updateTime: '2025-10-13 16:49:45'
  },
  {
    userId: '197775875294586880',
    dealerName: 'UZOMA JENNY EMMANUEL-UKEKA',
    userLevel: '',
    email: '',
    phone: '02340704032862',
    kycStatus: 'Rejected',
    status: 'Normal',
    businessPermission: 'Normal',
    country: 'NG',
    creator: 'Adagbonyin Noah',
    createTime: '2025-10-13 16:30:06',
    updateTime: '2025-10-13 16:47:35'
  },
  {
    userId: '197774456122468352',
    dealerName: 'SEMIU DELE OLADIMEJI',
    userLevel: 'Newcomer',
    email: '',
    phone: '0234032523896',
    kycStatus: 'Approved',
    status: 'Normal',
    businessPermission: 'Normal',
    country: 'NG',
    creator: 'Joel Aibumbea Onunuga',
    createTime: '2025-10-13 15:33:43',
    updateTime: '2025-10-13 16:24:16'
  },
  {
    userId: '197774145314475624',
    dealerName: 'PIUS EKPAGU',
    userLevel: '',
    email: '',
    phone: '02340908008052',
    kycStatus: 'Rejected',
    status: 'Normal',
    businessPermission: 'Normal',
    country: 'NG',
    creator: 'ayo.lawal@palmpay-inc.com',
    createTime: '2025-10-13 15:21:22',
    updateTime: '2025-10-13 15:49:11'
  },
  {
    userId: '197773975229848480',
    dealerName: 'TIMOTHY MORAKINYO RAJI',
    userLevel: '',
    email: '',
    phone: '02340805328934',
    kycStatus: 'Rejected',
    status: 'Normal',
    businessPermission: 'Normal',
    country: 'NG',
    creator: 'Joel Aibumbea Onunuga',
    createTime: '2025-10-13 15:14:38',
    updateTime: '2025-10-13 15:53:23'
  }
];

/** 获取Dealer列表 */
const getList = () => {
  loading.value = true;
  // 模拟API调用
  setTimeout(() => {
    // 根据查询参数过滤数据
    let filteredData = [...mockData];
    
    if (queryParams.userId) {
      filteredData = filteredData.filter(item => 
        item.userId?.toLowerCase().includes(queryParams.userId!.toLowerCase())
      );
    }
    
    if (queryParams.dealerName) {
      filteredData = filteredData.filter(item => 
        item.dealerName?.toLowerCase().includes(queryParams.dealerName!.toLowerCase())
      );
    }
    
    if (queryParams.email) {
      filteredData = filteredData.filter(item => 
        item.email?.toLowerCase().includes(queryParams.email!.toLowerCase())
      );
    }
    
    if (queryParams.phone) {
      filteredData = filteredData.filter(item => 
        item.phone?.toLowerCase().includes(queryParams.phone!.toLowerCase())
      );
    }
    
    if (queryParams.status) {
      filteredData = filteredData.filter(item => 
        item.status === queryParams.status
      );
    }
    
    dealerList.value = filteredData;
    total.value = filteredData.length;
    loading.value = false;
  }, 500);
  
  // 实际API调用示例（注释掉，因为是模拟数据）
  // listDealer(queryParams).then(res => {
  //   dealerList.value = res.rows;
  //   total.value = res.total;
  //   loading.value = false;
  // }).catch(() => {
  //   loading.value = false;
  // });
};

/** 处理查询 */
const handleQuery = () => {
  queryParams.pageNum = 1;
  getList();
};

/** 处理重置 */
const handleReset = () => {
  Object.assign(queryParams, {
    pageNum: 1,
    pageSize: 10,
    userId: '',
    dealerName: '',
    email: '',
    phone: '',
    status: ''
  });
  getList();
};



/** 查看详情 */
const handleDetail = (row: Dealer) => {
  router.push({
    path: `/dealer/detail/${row.userId}`
  });
};

/** 新增Dealer */
const handleCreate = () => {
  router.push('/dealer/create');
};

/** 初始加载 */
onMounted(() => {
  getList();
});
</script>

<style lang="scss" scoped>
.card-header {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-bottom: 20px;
}


.search-form {
  margin-bottom: 20px;
  padding: 15px;
  background-color: #f5f7fa;
  border-radius: 4px;
}

.demo-form-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

.demo-form-inline .el-form-item {
  margin-right: 10px;
  margin-bottom: 15px;
}

.demo-form-inline .el-input,
.demo-form-inline .el-select {
  width: 200px;
}

:deep(.el-table__row) {
  cursor: pointer;
}

:deep(.el-table__row:hover) {
  background-color: #f5f7fa;
}
</style>